<!DOCTYPE html>
<html>
<head>
    <title>{$propertyName|default=''}</title>
    <link href="/static/css/framework-font.css" rel="stylesheet"/>
    <script src="/static/js/jquery-2.1.1.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="/static/js/jquery.cookie.js"></script>
    <link href="/static/css/framework-theme.css" rel="stylesheet"/>
    <!--引用layui弹框插件-->
    <script src="/static/layui/layui.all.js"></script>
    <script src="/static/layui/layui.js"></script>
    <link href="/static/layui/css/layui.css" rel="stylesheet"/>
    <script src="/static/layui/lay/modules/layer.js"></script>
    <link href="/static/css/default/public.css" rel="stylesheet"/>
</head>
<style>
    .layui-card-body img{
        /*height:170px!important;*/
    }
    .layui-card-body img{
        width:100%;
        height:170px;
        overflow: hidden;
    }

</style>
<body>
<div class="newtest">

    <div class="newtest" style=" min-height:0">

        <div class="container new_serach">
            <span> 项目名称：</span>
            <div class="layui-inline">
                <input class="layui-input" id="deviceName"  value="{$deviceName|default=''}" autocomplete="off">
            </div>
            <input type="hidden" id="community_id" value="{$community_id|default=''}">
            <button class="layui-btn layui-btn-sm serach_btn" onclick="search()">搜索</button>

        </div>

    </div>


    <div class="layui-bg-gray" style="padding: 30px;">
        <div class="layui-row layui-col-space15" id="LAY_demo3">

            {if !empty($list)}
            {volist name="list" id="vo"}
            <div class="layui-col-md2">
                <div class="layui-card open_monitor" data-id="{$vo.id}" data-title="{$vo.title}">
                    <div class="layui-card-header" align="center"><b>{$vo.title}</b></div>
                    <div class="layui-card-body " align="center">
                        <img src="{$vo.img|default='/static/images/thumb.jpg'}">
                    </div>
                </div>
            </div>

            {/volist}
            {/if}
        </div>

    </div>

</div>



</body>

<script src="/static/ezuikit/ezuikit.js"></script>
<script src="/static/ezuikit/js/jquery.min.js"></script>
<script src="/static/ezuikit/js/query_cookies.js"></script>

<script>
    layui.use(["flow","layer","laydate"], function(){ //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
        var flow = layui.flow;
        var laydate = layui.laydate;

        //按屏加载图片
        flow.lazyimg({
            elem: '#LAY_demo3 img'
            ,scrollElem: '#LAY_demo3' //一般不用设置，此处只是演示需要。
        });

        //查看监控
        $('.open_monitor').click(function () {
            var title = $(this).attr("data-title");
            var id = $(this).attr("data-id");
            layer.open({
                type: 2
                ,title: title
                ,shade: 0.8
                ,moveType: 1 //拖拽模式，0或者1
                ,area: ['1000px', '820px']
                ,content: "/project/monitor/flv/id/"+id
            });
        });

        //查看回放
        $(".replay").click(function () {
            var id      = $(this).attr("data-id");
            layer.open({
                type: 2
                ,title: '查看回放'
                ,shade: 0.8
                ,moveType: 1 //拖拽模式，0或者1
                ,area: ['60%', '80%']
                ,content: "/wuye/monitor/flvs/id/"+id
            });
        })
    });

    function search() {
        var community_id = $("#community_id").val();
        var url = "/project/monitor/info?";
        var deviceName = $("#deviceName").val();
        if (deviceName) {
            url += "&deviceName="+deviceName;
        }
        if (community_id){
            url += "&community_id="+community_id;
        }
        window.location.href = url;
    }
</script>

</html>
